<template>
  <div id="app">
    <div class="el-container layout">
      <Sidebar />
      <div class="el-container is-vertical">
        <div class="el-header">
          <div class="ac">
            <Hamburger :isActive="isCollapse" @toggleClick="toggleSideBar" />
            <Breadcrumb />
          </div>
          <div class="ac">
            <div class="mr-16">欢迎您 系统管理员</div>
            <el-dropdown>
              <el-avatar :src="headUserImg"></el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <i class="el-icon-user"></i>
                  <span>个人信息</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <i class="el-icon-edit"></i>
                  <span>修改密码</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click.native="quit">
                  <i class="el-icon-switch-button"></i>
                  <span>退出登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <AppMain />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AppMain from './AppMain.vue'
import Hamburger from './Hamburger.vue'
import Sidebar from './Sidebar/index.vue'
import Breadcrumb from './Breadcrumb/index.vue'
import headUserImg from '@/assets/images/user.jpg'
import { LogOut } from '@/router/routerUtils'
export default {
  components: {
    Sidebar,
    AppMain,
    Hamburger,
    Breadcrumb
  },
  data() {
    return {
      headUserImg
    }
  },
  computed: {
    ...mapGetters(['isCollapse'])
  },
  created() {},
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async quit() {
      await this.$confirm('您确认退出登录吗？', '提示', { type: 'warning' })
      LogOut()
    }
  }
}
</script>

<style lang="scss" scoped>
.layout {
  min-width: 760px px;
}
.el-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.el-container.is-vertical {
  flex-direction: column;
}
.el-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  padding: 0 15px;
  background-color: #ffffff;
  border-bottom: 1px solid #f1f1f1;
}
</style>
